<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <div>商品管理列表</div>
        <el-button type="primary" @click="showDialog('add')"
          >添加商品</el-button
        >
      </el-row>
      <el-table :data="goods">
        <el-table-column label="标题" prop="name"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-row type="flex" justify="space-around">
              <i class="el-icon-view" @click="showDialog('view', row.id)"></i>
              <i
                class="el-icon-edit-outline"
                @click="showDialog('edit', row.id)"
              ></i>
              <i class="el-icon-delete" @click="delGoods(row.id)"></i>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="title" :visible.sync="isShow" @close="handleClose">
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="goodsForm"
        v-if="type != 'view'"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goodsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="description">
          <el-input v-model="goodsForm.description"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button @click="isShow = false">取消</el-button>
        </el-form-item>
      </el-form>
      <div v-else>
        <div>{{ goodsForm.name }}</div>
        <div>{{ goodsForm.description }}</div>
        <div>{{ goodsForm.price }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoodsList,
  deleteGood,
  getGoodDetail,
  updateGoods,
  createGood,
} from "../API/goods";
import { Message } from "element-ui";
export default {
  data() {
    return {
      goods: [],
      isShow: false,
      rules: {
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        description: [
          { required: true, message: "商品描述不能为空", trigger: "blur" },
        ],
        price: [
          { required: true, message: "商品价格不能为空", trigger: "blur" },
        ],
      },
      goodsForm: {
        name: "",
        description: "",
        price: 0,
      },
      type: "",
    };
  },
  methods: {
    async getGoodsList() {
      let { data } = await getGoodsList();
      this.goods = data;
    },
    delGoods(id) {
      this.$confirm("你确定要删除吗？")
        .then(async () => {
          // console.log("删除");
          let result = await deleteGood(id);
          if (result.status == 200) {
            Message({
              message: "删除成功",
              type: "success",
              duration: 800,
              center: true,
            });
            this.getGoodsList();
          }
        })
        .catch(() => {});
    },
    async showDialog(type, id) {
      this.isShow = true;
      this.type = type;
      if (this.type != "add") {
        let res = await getGoodDetail(id);
        if (res.status == 200) {
          this.goodsForm = { ...res.data };
        }
      }
    },
    handleClose() {
      this.goodsForm = {
        name: "",
        description: "",
        price: 0,
      };
      this?.$refs?.goodsForm?.clearValidate();
    },
    async handleSubmit() {
      const { id, name, description, price } = this.goodsForm;
      if (id) {
        let result = await updateGoods(id, name, description, price);
        if (result.status == 200) {
          Message({
            message: "修改成功",
            type: "success",
            duration: 800,
            center: true,
          });
        }
      } else {
        try {
          let result = await createGood(name, description, price);
          if (result.status == 200) {
            Message({
              message: "添加成功",
              type: "success",
              duration: 800,
              center: true,
            });
          }
        } catch (e) {
          console.log(e);
        }
      }
      this.getGoodsList();
      this.isShow = false;
    },
  },
  computed: {
    title() {
      if (this.type == "add") {
        return "添加商品";
      } else if (this.type == "edit") {
        return "修改商品";
      } else if (this.type == "view") {
        return "商品预览";
      }
    },
  },
  created() {
    this.getGoodsList();
  },
};
</script>

<style>
</style>